<%@page import="java.util.Iterator"%>
<%@page import="jangdolbaeng2.tools.CategoryMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<!-- 작성자 :진승민 
	기능 : 상품등록 및 수정/삭제 
	최신 수정일 : 2014-10-16 -->
<html>
<!-- css 로드 -->
<link rel="stylesheet" type="text/css" href="/Jangdolbaeng2/css/seller/skin/Default/bootstrap.min.css" />
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<script type="text/javascript" src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Jangdolbaeng2/js/holder.js"></script>
<s:include value="sellerHeader.jsp"></s:include>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>상품 등록</title>
</head>
<body>
	<div class="container">	
	<!-- 상품 등록  -->
		<form action="addProduct" method="post" enctype="multipart/form-data">
			<input type="hidden" name="product.shop_seq" value="${shop_seq}">
			<input type="hidden" name="addPdt" id ="addPdt" value="0">
			<table class="table table-striped" style="width: 1100px">
				<tr>
					<th colspan="2" class="text-left"><span
					class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;<a>상품 등록</a></th>
				</tr>
				<tr>
					<td></td>
				</tr>
				<tr>
					<th>상품명</th>
					<td><input type="text" class="form-control"
						name="product.product_name" id="pdt"></td>
				</tr>
				<tr>
					<th>상품 카테고리</th>
					<td><select name='product.product_category'
						class="form-control">
							<s:iterator value="categoryMap" var="keys">
							<option value='<s:property value="key"/>'><s:property
										value="value" />							
							</s:iterator>
					</select></td>
				<tr>
					<th>상품가격(원)</th>
					<td><input type="text" class="form-control"
						name="product.product_price"></td>
				<tr>
					<th>기본 사진</th>
					<td><input type="file" name="uploads" id='imgInp0'></td>
				<tr>
					<th colspan="2"><img style="width: 220px; height: 150px"
						id='preview0' class="hidden"></th>
				<tr>
					<th>기본 상품정보</th>
					<td><input type="text" class="form-control"
						name='product.product_info1'></td>
				<tr>
					<th>상세 사진</th>
					<td><input type="file" name="uploads" id='imgInp1'></td>
				<tr>
					<th colspan="2"><img id='preview1' style="width: 1000px;height:auto;"></th>
				<tr>
					<th>상품정보</th>
					<td><textarea class="form-control" rows="5"
							name="product.product_info2"></textarea></td>
				<tr>
					<th colspan="2" class="text-center"><input type="submit"
						class="btn btn-primary btn" value="등록"></th>
				</tr>				
			</table>
			<br>
		</form>	  
		<!-- 수정용 게시판 -->		
		<table class="table table-striped" style="width: 1100px;">
		<tr><th><span
					class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;<a>상품 수정/삭제</a></th></tr>
			<!-- 판매상품 게시판-->
		<tr><td>
			<div class="row" style="width: 1100;">
				<s:iterator value="ProductList">
					<div class="col-md-4 shopProductImg">
						<div class="thumbnail">
							<s:if test="%{product_image1 !=null}">
								<img src="data:image/jpeg;base64,${product_image1}"
									class="img-rounded" alt="${product_name}"
									style="width: 300px; height: 200px">
							</s:if>
							<s:elseif test="%{product_image1 == null}">
								<img data-src="holder.js/300x200/text:${product_name}">
							</s:elseif>

							<div class="caption">
								<h3 style="text-align: center;">${product_name}</h3>
								<h4 style="text-align: center;">
									<small> ${product_price} 원</small>
								</h4>
								<p>
									<a href=""
										class="btn btn-primary btn-block" onclick="updateProduct(${product_seq})">상품 수정</a>
									<a href=""
										class="btn btn-danger btn-block" onclick="delProduct(${product_seq})">상품 삭제</a>
								</p>
							</div>
						</div>
					</div>
				</s:iterator>				
			</div>
			</td></tr>
			</table>
			</div>	
	<script type="text/javascript">
	$(document).ready(function(){
		$('#pdt').change(function(){
			$('#addPdt').val('1');
		});
	});
	// 상품 수정 요청
	function updateProduct(seq){
		window.open('getOneProduct.action?update_product_seq='+seq,'QnA Write',"width=1100, height=630");										
	}
	function delProduct(sss) {
		if (confirm("정말 이 상품을 삭제하시겠습니까?")) {
			$.ajax({
				url:"/Jangdolbaeng2/delProduct.action?delSeq="+sss,
				success : function(){
					location.reload();
				}
			})			
		}
	}
		//image 파일 업로드 함수 
		function readURL(input,index) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					$('#preview'+index).attr('src', e.target.result);
					$('#preview'+index).removeClass('hidden');
				}
				reader.readAsDataURL(input.files[0]);
			}
			if(index>2){
				if(isEven(index))
					$(".imageIndex2").val('true');
				else
					$(".imageIndex1").val('true');				
			}
		}
		
		// 리스너 배열
		var indexArray = [1,2];
		
		//image 미리보기 리스너	
		$.each(indexArray,function(index){			
			$("#imgInp"+index).change(function() {				
				readURL(this,index);});			
		});
		function isEven(n){			
			return (n%2)==0 ? true : false;
		}		
	</script>	
</body>
<div id="footer">
	<%@ include file="../customer/main_footer.jsp" %>
</div>
</html>